<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@	taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>创建数据库表</title>
	<link rel="stylesheet" type="text/css" href="../common/easyui/themes/metro-green/easyui.css" />
	<link rel="stylesheet" type="text/css" href="../common/easyui/themes/icon.css" />
	<script type="text/javascript" src="../common/easyui/jquery.min.js"></script>
	<script type="text/javascript" src="../common/easyui/jquery.easyui.min.js"></script>
	<script type="text/javascript" src="../common/common.js"></script>
	<script type="text/javascript" src="../common/system.js"></script>
	<style type="text/css">
		html, body {
			height: 100%;
			padding: 0;
			margin: 0;
		}
	</style>
</head>

<body>
<!-- 表格 -->
<div id="dg_createTable"></div>
<!-- 表格上的工具栏 -->
<div id="toolbar_createTable" style="padding-left:5px; height:100px;">
	<div style="margin-bottom: 5px;">
		<a href="javascript:enableExecute();" class="easyui-linkbutton" data-options="iconCls:'icon-ok',plain:true">完成</a>
		<a href="javascript:reject();" class="easyui-linkbutton" data-options="iconCls:'icon-arrow-undo',plain:true">重置</a>
		<a href="javascript:append();" class="easyui-linkbutton" data-options="iconCls:'icon-add',plain:true">添加字段</a>
		<a href="javascript:removeit();" class="easyui-linkbutton" data-options="iconCls:'icon-remove',plain:true">删除字段</a>
		<a href="javascript:createTable();" class="easyui-linkbutton" data-options="iconCls:'icon-execute',plain:true,disabled:true">执行</a>
	</div>
	<div style="margin-bottom: 5px; vertical-align: middle;">
		<form method="post">
			<!-- 隐藏域：当前数据库名称 -->
			<input type="hidden" name="databaseName" />
			<span style="font-size: 14px; line-height: 50px;">表名称：</span>
			<span style="line-height: 50px;">
				<input class="easyui-textbox easyui-validatebox" name="table_name" data-options="required: true, validType:'variable', prompt:'表名称......'" style="width:150px;height:26px;" />
			</span>
			<span style="font-size: 14px; line-height: 50px;">&nbsp;&nbsp;存储引擎：</span>
			<span style="line-height: 50px;">
				<select class="easyui-combobox" name="engine" data-options="panelHeight:'auto',value:'InnoDB',editable:false" style="width:100px;height:26px;">
					<option value="MRG_MYISAM">MRG_MYISAM</option>
					<option value="MyISAM">MyISAM</option>
					<option value="BLACKHOLE">BLACKHOLE</option>
					<option value="CSV">CSV</option>
					<option value="MEMORY">MEMORY</option>
					<option value="ARCHIVE">ARCHIVE</option>
					<option value="InnoDB">InnoDB</option>
				</select>
			</span>
			<span style="font-size: 14px; line-height: 50px;">&nbsp;&nbsp;&nbsp;表说明：</span>
			<span style="line-height: 50px;">
				<input class="easyui-textbox" name="table_comment" data-options="prompt:'表说明......'" style="width:250px;height:26px;" />
			</span>
		</form>
	</div>
</div>

<!-- JS脚本 -->
<script type="text/javascript">
var editIndex = undefined;
$(function(){
	// 初始化表格
	$('#dg_createTable').datagrid({
		fitColumns : true,
		fit : true,
		border : false,
		rownumbers : true,
		nowrap : false,
		striped : true,
		singleSelect : true,
		toolbar : '#toolbar_createTable',
		columns : [[
			{field:'column_name', title:'名字', width:50, editor:{
				type:'textbox',
				options:{
					required:true
				}
			}},
			{field:'column_type', title:'类型', width:30, editor:{
				type:'combobox',
				options:{
					required:true,
					panelHeight:'auto',
					editable:false,
					textField: 'label',
					valueField: 'value',
					data: [{
						label: 'INT',
						value: 'INT'
					},{
						label: 'VARCHAR',
						value: 'VARCHAR'
					},{
						label: 'CHAR',
						value: 'CHAR'
					},{
						label: 'TINYINT',
						value: 'TINYINT'
					},{
						label: 'TEXT',
						value: 'TEXT'
					},{
						label: 'DATE',
						value: 'DATE'
					},{
						label: 'BIGINT',
						value: 'BIGINT'
					},{
						label: 'DOUBLE',
						value: 'DOUBLE'
					},{
						label: 'DECIMAL',
						value: 'DECIMAL'
					},{
						label: 'DATETIME',
						value: 'DATETIME'
					},{
						label: 'TIMESTAMP',
						value: 'TIMESTAMP'
					}]
				}
			}},
			{field:'column_len', title:'长度', width:20, editor:'numberbox'},
			{field:'column_default', title:'默认值', width:35, editor:{
				type:'combobox',
				options:{
					panelHeight:'auto',
					textField: 'label',
					valueField: 'value',
					data: [{
						label: '无',
						value: ''
					},{
						label: 'NULL',
						value: 'NULL'
					},{
						label: 'CURRENT_TIMESTRAMP',
						value: 'CURRENT_TIMESTRAMP'
					}]
				}
			}},
			{field:'extra', title:'属性', width:50, editor:{
				type:'combobox',
				options:{
					panelHeight:'auto',
					editable:false,
					textField: 'label',
					valueField: 'value',
					data: [{
						label: '无',
						value: ''
					},{
						label: 'BINARY',
						value: 'BINARY'
					},{
						label: 'UNSIGNED',
						value: 'UNSIGNED'
					},{
						label: 'UNSIGNED ZEROFILL',
						value: 'UNSIGNED ZEROFILL'
					},{
						label: 'ON UPDATE CURRENT_TIMESTAMP',
						value: 'ON UPDATE CURRENT_TIMESTAMP'
					}]
				}
			}},
			{field:'is_nullable', title:'允许空', width:30, align:'center', editor:{
				type:'checkbox',
				options:{
					on:'NULL',
					off:'NOT NULL'
				}
			}},
			{field:'column_key', title:'键', width:30, editor:{
				type:'combobox',
				options:{
					panelHeight:'auto',
					editable:false,
					textField: 'label',
					valueField: 'value',
					data: [{
						label: '无',
						value: ''
					},{
						label: 'PRIMARY KEY',
						value: 'PRIMARY KEY'
					},{
						label: 'UNIQUE',
						value: 'UNIQUE'
					}]
				}
			}},
			{field:'auto_increment', title:'自增列', width:30, align:'center', editor:{
				type:'checkbox',
				options:{
					on:'AUTO_INCREMENT',
					off:''
				}
			}},
			{field:'column_comment', title:'字段说明', width:80, editor:'text'}
		]],
		onClickRow : function(index){
			disableExecute();
			if (editIndex != index){
				if (endEditing()){
					$('#dg_createTable').datagrid('selectRow', index).datagrid('beginEdit', index);
					editIndex = index;
				} else {
					$('#dg_createTable').datagrid('selectRow', editIndex);
				}
			}
		}
	});
	
	// 展开一行
	append();
});

// 创建表
function createTable(){
	// 验证工具栏上的表单
	var isValid = $('#toolbar_createTable form').form('validate');
	if(!isValid){
		disableExecute();
		$.messager.alert("提示", "请检查您输入的表名！");
		return;
	}
	// 获取受影响的行数据
	var rows = getChanges();
	if(rows.length == 0){
		disableExecute();
		$.messager.alert("提示", "不能插入一个空表，至少保证有一个字段！");
		return;
	}
	// 设置表单隐藏域的值
	$('#toolbar_createTable form input:eq(0)').val(loc[1]);
	// 获取表单数据
	var formData = serializeForm($('#toolbar_createTable form'));
	// 封装AJAX请求参数
	var jsonData = {};
	jsonData['jsonFields'] = JSON.stringify(rows);
	jsonData['serverName'] = loc[0];
	jsonData['databaseName'] = loc[1];
	jsonData['table_name'] = formData['table_name'];
	jsonData['engine'] = formData['engine'];
	jsonData['table_comment'] = formData['table_comment'];
	// 发送AJAX请求
	$.ajax({
		type : 'post',
		url : url_edit,
		data : jsonData,
		dataType : 'json',
		success : function(data){
			if(data.success){
				$.messager.alert('成功', data.message);
				closeDialog('dialog_createTable');
				// 重新载入树形列表
				reload(initDatabaseTree);
				// 重新载入当前表格
				reload(initTableStatusGrid);
			} else{
				$.messager.alert("失败", data.message + "<br>" + data.data);
			}
		}
	});
}

// 使执行按钮变为可见
function enableExecute(){
	if(endEditing()){
		// 如果执行按钮不可用，则设置为可用
		if($('#toolbar_createTable a:eq(4)').linkbutton('options').disabled){
			enableLinkBtn($('#toolbar_createTable a:eq(4)'));
		}
	} else{
		$.messager.alert("提示", "亲，当前最后一行还未输入完成！");
	}
}

//使执行按钮不可用
function disableExecute(){
	// 如果执行按钮可用，则设置为不可用
	if(!$('#toolbar_createTable a:eq(4)').linkbutton('options').disabled){
		disableLinkBtn($('#toolbar_createTable a:eq(4)'));
	}
}

// 结束编辑
function endEditing(){
	if (editIndex == undefined){
		return true;
	}
	if ($('#dg_createTable').datagrid('validateRow', editIndex)){
		$('#dg_createTable').datagrid('endEdit', editIndex);
		editIndex = undefined;
		return true;
	} else {
		// 如果执行按钮可用，则设置为不可用
		if(!$('#toolbar_createTable a:eq(4)').linkbutton('options').disabled){
			disableLinkBtn($('#toolbar_createTable a:eq(4)'));
		}
		return false;
	}
}

// 添加一行
function append(){
	if (endEditing()){
		$('#dg_createTable').datagrid('appendRow',{});
		editIndex = $('#dg_createTable').datagrid('getRows').length-1;
		$('#dg_createTable').datagrid('selectRow', editIndex).datagrid('beginEdit', editIndex);
	} else{
		$.messager.alert("提示", "亲，当前最后一行还未输入完成！");
	}
}

// 移除一行
function removeit(){
	if (editIndex == undefined){return;}
	$('#dg_createTable').datagrid('cancelEdit', editIndex).datagrid('deleteRow', editIndex);
	editIndex = undefined;
}

// 将变化数据载入表格中
function accept(){
	if (endEditing()){
		$('#dg_createTable').datagrid('acceptChanges');
	}
}

// 回退到初始状态
function reject(){
	$('#dg_createTable').datagrid('rejectChanges');
	editIndex = undefined;
	append();
}

// 获取受影响的行
function getChanges(){
	var rows = $('#dg_createTable').datagrid('getChanges');
	return rows;
}
</script>
</body>
</html>